<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>斗地主</title>
<script type="text/javascript">
var basePath ="<%=basePath%>";
</script>
<script type="text/javascript"
	src="<%=basePath%>/resources/js/jquery-3.2.1.min.js"></script>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
</style>
<script type="text/javascript">
	$(function() {
		// 		init_room();
		init_cards();
		init_bottom_cards();
		init_back_cards();
	})
	function init_room() {
		var card = $("#card").clone(true);
		card.attr("id", "card_" + 1);
		$("#cards_self").append(card);
		var card2 = $("#card").clone(true);
		card2.attr("id", "card_" + 2);
		card2.css("left", "25px");
		card2.css("top", "0px");
		$("#cards_self").append(card2);
	}
	var play_cards = [];

	function init_back_cards() {
		var url = basePath + "/getPartner.do";
		$.ajax({
			type : "POST",
			url : url,
			// 			data : area,
			async : false,
			success : function(res) {
				var data = JSON.parse(res);
				var top = 28;
				for (var i = 0; i < data.length; i++) {
					_init_back_card(i, i * top, card, "left_cards_",
							"left_cards");
				}
			}
		});
	}
	function init_bottom_cards() {
		var url = basePath + "/getBottomCards.do";
		$.ajax({
			type : "POST",
			url : url,
			// 			data : area,
			async : false,
			success : function(res) {
				var data = JSON.parse(res);
				var left = 125;
				for (var i = 0; i < data.length; i++) {
					var card = data[i];
					_init_card(i, i * left, card, "bottom_card_",
							"bottom_cards");
				}
			}
		});
	}
	function sel_card(dom) {
		var offset = "-15px";
		var top = dom.style.top;
		var id = dom.id;
		id = id.substring(id.indexOf("_") + 1);
		switch (top) {
		case offset:
			top = "0px";
			play_cards[id] = -1;
			break;
		default:
			top = offset;
			play_cards[id] = id;
			break;
		}
		dom.style.top = top;
	}
	//初始化牌局
	function init_cards() {
		var url = basePath + "/getSimpleDdzCards.do";
		$.ajax({
			type : "POST",
			url : url,
			// 			data : area,
			async : false,
			success : function(res) {
				var data = JSON.parse(res);
				var left = 28;
				for (var i = 0; i < data.length; i++) {
					var card = data[i];
					_init_card(i, i * left, card, "card_", "cards_self");
				}
				init_cards_button();
			}
		});
	}
	//初始化一张牌
	function _init_card(id, offset, card, card_pre, div_id) {
		var num = card.num;
		var suit = card.suit;
		var joker = card.joker;
		var card = null;
		if (num != -1) {
			card = $("#card").clone(true);
			var p = card.children("div").children("div")[1];
			if (num > 10) {
				switch (num) {
				case 11:
					num = "J";
					break;
				case 12:
					num = "Q";
					break;
				case 13:
					num = "K";
					break;
				}
			}
			if (num == 1) {
				num = "A"
			}
			var suit_div = card.children("div").children("div");
			var suit_up_img = $(suit_div[2]).children("img");
			var suit_main_img = $(suit_div[3]).children("img");
			switch (suit) {
			case "Heart":
				suit_up_img[0].style.display = "block";
				suit_main_img[0].style.display = "block";
				break;
			case "Spade":
				suit_up_img[1].style.display = "block";
				suit_main_img[1].style.display = "block";
				break;
			case "Diamond":
				suit_up_img[2].style.display = "block";
				suit_main_img[2].style.display = "block";
				break;
			default:
				suit_up_img[3].style.display = "block";
				suit_main_img[3].style.display = "block";
				break;
			}
			p.innerText = num;
		} else {
			if (joker == "Min") {
				card = $("#min_king_card").clone(true);
			} else {
				card = $("#max_king_card").clone(true);
			}
		}
		card.css("left", offset + "px");
		card.css("top", "0px");
		card.attr("id", card_pre + id);
		$("#" + div_id).append(card);
	}
	function init_cards_button() {
		$("#button_group").append($("#cards_button_group"));
	}
	function playCards() {
		var cards = "";
		for (var i = 0; i < play_cards.length; i++) {
			if (play_cards[i] != "undefined" && play_cards[i] != -1) {
				cards += play_cards[i] + ","
			}
		}
	}
	function noPlayCards() {
		for (var i = 0; i < play_cards.length; i++) {
			if (play_cards[i] != undefined && play_cards[i] != -1) {
				sel_card(document.getElementById("card_" + i));
			}
		}
	}
</script>
</head>
<body>
	<div style="height: 60px; background-color: #BD8865;"></div>
	<div
		style="position: relative; height: 850px; width: 1100px; margin: 0 auto;">
		<!-- 		左边 -->
		<div
			style="position: absolute; left: 0px; top: 0px; height: 600px; width: 250px;">
			<div
				style="position: relative; left: 0px; top: 0px; height: 600px; width: 190px"
				id="left_cards"></div>
			</div>
		<!-- 		底牌区 -->
		<div
			style="position: absolute; left: 250px; top: 0px; height: 190px; width: 600px;">
			<div
				style="position: relative; left: 110px; bottom: 0px; height: 190px; width: 370px;"
				id="bottom_cards"></div>
		</div>
		<div
			style="position: absolute; left: 250px; top: 200px; height: 320px; width: 600px;"></div>
		<!-- 		自己牌堆 -->
		<div
			style="position: absolute; left: 250px; top: 550px; height: 300px; width: 600px;">
			<div
				style="position: relative; left: 0px; top: 0px; height: 80px; width: 600px;">
				<div
					style="position: relative; left: 150px; top: 0px; height: 50px; width: 300px;"
					id="button_group"></div>
			</div>
			<div
				style="position: relative; left: 30px; bottom: 0px; height: 190px; width: 600px;"
				id="cards_self"></div>

		</div>
		<!-- 		下家牌区 -->
		<div
			style="position: absolute; right: 0px; top: 0px; height: 600px; width: 250px;"></div>
	</div>
	<div style="display: none;">
		<div
			style="position: absolute; left: 0px; top: 0px; height: 50px; width: 300px;"
			id="cards_button_group">
			<table>
				<tbody>
					<tr>
						<td style="width: 60px;"></td>
						<td style="width: 60px;"><input type="button" value="出牌"
							onclick="playCards()" style="width: 60px; height: 50px;"></td>
						<td style="width: 60px;"></td>
						<td style="width: 60px;"><input type="button" value="不出"
							onclick="noPlayCards()" style="width: 60px; height: 50px;"></td>
						<td style="width: 60px;"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div style="display: none;">
		<!-- 		<div style="position: relative; width: 120px; height: 180px;" -->
		<!-- 			id="card"> -->
		<div style="position: absolute; left: 0px; top: 0px;" id="card"
			onclick="sel_card(this);">
			<div
				style="position: relative; left: 0px; top: 0px; width: 120px; height: 180px;">
				<div style="position: absolute; left: 0px; top: 0px;">
					<img alt="card" src="<%=basePath%>/resources/img/card/front.jpg"
						style="width: 120px; height: 180px;">
				</div>
				<div id="num_up" style="position: absolute; left: 10px; top: 5px;">
					<p style="font-size: 20px;">J</p>
				</div>
				<div id="suit_up" style="position: absolute; left: 4px; top: 30px;">
					<img alt="card" src="<%=basePath%>/resources/img/card/heart.jpg"
						style="width: 20px; height: 20px; display: none;"> <img
						alt="card" src="<%=basePath%>/resources/img/card/spade.jpg"
						style="width: 20px; height: 20px; display: none;"> <img
						alt="card" src="<%=basePath%>/resources/img/card/diamond.jpg"
						style="width: 20px; height: 20px; display: none;"> <img
						alt="card" src="<%=basePath%>/resources/img/card/club.jpg"
						style="width: 20px; height: 20px; display: none;">
				</div>
				<div id="suit_main"
					style="position: absolute; left: 45px; top: 75px;">
					<img alt="card" src="<%=basePath%>/resources/img/card/heart.jpg"
						style="width: 30px; height: 30px; display: none;"> <img
						alt="card" src="<%=basePath%>/resources/img/card/spade.jpg"
						style="width: 30px; height: 30px; display: none;"> <img
						alt="card" src="<%=basePath%>/resources/img/card/diamond.jpg"
						style="width: 30px; height: 30px; display: none;"> <img
						alt="card" src="<%=basePath%>/resources/img/card/club.jpg"
						style="width: 30px; height: 30px; display: none;">
				</div>
			</div>
		</div>
		<!-- 		</div> -->
	</div>
	<div style="display: none;">
		<div style="position: absolute; left: 0px; top: 0px;"
			id="max_king_card" onclick="sel_card(this);">
			<div
				style="position: relative; left: 0px; top: 0px; width: 120px; height: 180px;">
				<div style="position: absolute; left: 0px; top: 0px;">
					<img alt="card" src="<%=basePath%>/resources/img/card/front.jpg"
						style="width: 120px; height: 180px;">
				</div>
				<div id="num_up"
					style="position: absolute; left: 10px; top: 10px; width: 20px;">
					<img alt="card"
						src="<%=basePath%>/resources/img/card/max_joker.jpg"
						style="width: 10px; height: 80px;">
				</div>
				<div id="suit_main"
					style="position: absolute; left: 45px; top: 75px;">
					<!-- 					<p style="font-size: 50px;">J</p> -->
					<%-- 					<img alt="card" src="<%=basePath%>/resources/img/card/club.jpg" --%>
					<!-- 						style="width: 30px; height: 30px;"> -->
				</div>
			</div>
		</div>
	</div>
	<div style="display: none;">
		<div style="position: absolute; left: 0px; top: 0px;"
			onclick="sel_card(this);" id="min_king_card">
			<div
				style="position: relative; left: 0px; top: 0px; width: 120px; height: 180px;">
				<div style="position: absolute; left: 0px; top: 0px;">
					<img alt="card" src="<%=basePath%>/resources/img/card/front.jpg"
						style="width: 120px; height: 180px;">
				</div>
				<div id="num_up"
					style="position: absolute; left: 10px; top: 10px; width: 20px;">
					<img alt="card"
						src="<%=basePath%>/resources/img/card/min_joker.jpg"
						style="width: 10px; height: 80px;">
				</div>
				<div id="suit_main"
					style="position: absolute; left: 45px; top: 75px;"></div>
			</div>
		</div>
	</div>
	<div style="display: none;">
		<div style="position: absolute; left: 0px; top: 0px;"
			id="back_card">
			<div
				style="position: relative; left: 0px; top: 0px; width: 120px; height: 180px;">
				<div style="position: absolute; left: 0px; top: 0px;">
					<img alt="card" src="<%=basePath%>/resources/img/card/front.jpg"
						style="width: 120px; height: 180px;">
				</div>
				<div style="position: absolute; left: 0px; top: 0px;">
					<img alt="card" src="<%=basePath%>/resources/img/card/back_color.jpg"
						style="width: 120px; height: 180px;">
				</div>
			</div>
		</div>
	</div>
</body>
</html>